<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <BlogHeader />
    <el-divider content-position="center">Go</el-divider>
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
        <div
          v-for="article in info1.results"
          v-bind:key="article.url"
          id="articles"
        >
          <span v-if="article.tags == 'go'">
            <router-link
              :to="{ name: 'ArticleDetail', params: { id: article.id } }"
              class="article-title"
            >
              {{ article.title }}
            </router-link>
            <div>{{ formatted_time(article.created) }} created</div>
            <br
          /></span>
        </div>
        <div
          v-for="article in info2.results"
          v-bind:key="article.url"
          id="articles"
        >
          <span v-if="article.tags == 'go'">
            <router-link
              :to="{ name: 'ArticleDetail', params: { id: article.id } }"
              class="article-title"
            >
              {{ article.title }}
            </router-link>
            <div>{{ formatted_time(article.created) }} created</div>
            <br
          /></span>
        </div>
        <div
          v-for="article in info3.results"
          v-bind:key="article.url"
          id="articles"
        >
          <span v-if="article.tags == 'go'">
            <router-link
              :to="{ name: 'ArticleDetail', params: { id: article.id } }"
              class="article-title"
            >
              {{ article.title }}
            </router-link>
            <div>{{ formatted_time(article.created) }} created</div>
            <br
          /></span>
        </div>
      </el-main>
      <el-aside width="200px"></el-aside>
    </el-container>
    <BlogFooter />
  </div>
</template>

<script>
import BlogHeader from "@/components/BlogHeader.vue";
import BlogFooter from "@/components/BlogFooter.vue";
import axios from "axios";

export default {
  name: "Go",
  components: { BlogHeader, BlogFooter },

  data: function() {
    return {
      info1: "",
      info2: "",
      info3: "",
    };
  },
  mounted() {
    axios
      .get("/api/article/?page=1")
      .then((response) => (this.info1 = response.data));
    axios
      .get("/api/article/?page=2")
      .then((response) => (this.info2 = response.data));
    axios
      .get("/api/article/?page=3")
      .then((response) => (this.info3 = response.data));
  },

  methods: {
    toUrl(url) {
      //window.location.href=url;
      window.open(url, "_blank");
    },
    handleChange(val) {
      console.log(val);
    },
    formatted_time: function(iso_date_string) {
      const date = new Date(iso_date_string);
      return date.toLocaleDateString();
    },
  },
};
</script>

<style scoped>
.link:hover {
  color: LightSkyBlue;
  cursor: pointer;
}
.article-title {
  font-family: "Ubuntu", "Noto Serif SC", source-han-serif-sc, sans-serif;
  font-weight: 700;
  font-style: normal;
}
</style>
